<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide()"
      :mask-closable="false"
      width="950"
    >
      <Divider orientation="center">基本信息</Divider>
      <Row :gutter="16">
         <Col span="24">
          <div class="highlight-font">商品名称：{{ orderInfo.orderMall.goodsName }}</div>
        </Col>
       
        <Col span="12">
          <div class="highlight-font">手机号码：{{ orderInfo.orderMall.username }}</div>
        </Col>
        <Col span="12">
          <div class="highlight-font">清洗件数：{{ orderInfo.orderMall.goodsNum }}</div>
        </Col>
         <Col span="12">
          <div >核销码：{{ orderInfo.orderMall.voucherCode }}</div>
        </Col>
        <Col span="12">
          <div>
            状态：{{ orderInfo.orderMall.state == 1 ? '未核销' : '已核销' }}
          </div>
        </Col>
      </Row>
      <Divider orientation="center">地址信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>取件联系人：{{ orderInfo.orderMall.takeMan }}</div>
        </Col>
        <Col span="12">
          <div>取件联系电话：{{ orderInfo.orderMall.takePhone }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>
            取件地址：
            {{ orderInfo.orderMall.takeProvince }}
            {{ orderInfo.orderMall.takeCity }}
            {{ orderInfo.orderMall.takeCounty }}
            {{ orderInfo.orderMall.takeAddress }}
          </div>
        </Col>
      </Row>

      <Row :gutter="16">
        <Col span="12">
          <div>送衣联系人：{{ orderInfo.orderMall.backMan }}</div>
        </Col>
        <Col span="12">
          <div>送衣联系电话：{{ orderInfo.orderMall.backPhone }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>
            送衣地址：
            {{ orderInfo.orderMall.backProvince }}
            {{ orderInfo.orderMall.backCity }}
            {{ orderInfo.orderMall.backCounty }}
            {{ orderInfo.orderMall.backAddress }}
          </div>
        </Col>
      </Row>
      <Divider orientation="center">物流信息</Divider>
      <Row :gutter="16">
        <Col span="12">
          <div>取件物流：{{ orderInfo.sendLogistics.logisticsName }}</div>
        </Col>
        <Col span="12">
          <div>
            取件物流状态：
            <template v-if="orderInfo.sendLogistics.state == 1">
              待取件
            </template>
            <template v-if="orderInfo.sendLogistics.state == 2">
              运输中
            </template>
            <template v-if="orderInfo.sendLogistics.state == 3">
              确认收货
            </template>
          </div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="24">
          <div>取件物流单号：{{ orderInfo.sendLogistics.logisticsNum }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="12">
          <div>收件物流：{{ orderInfo.backLogistics.logisticsName }}</div>
        </Col>
        <Col span="12">
          <div>
            取件物流状态：
            <template v-if="orderInfo.backLogistics.state == 1">
              待取件
            </template>
            <template v-if="orderInfo.backLogistics.state == 2">
              运输中
            </template>
            <template v-if="orderInfo.backLogistics.state == 3">
              确认收货
            </template>
          </div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="24">
          <div>收件物流单号：{{ orderInfo.backLogistics.logisticsNum }}</div>
        </Col>
      </Row>

      <Divider orientation="center">工厂备注</Divider>
      <Row :gutter="16">
        <Col span="24">
          <div>{{ orderInfo.orderMall.factoryRemark }}</div>
        </Col>
      </Row>
      <Divider orientation="center">运营备注</Divider>
      <Row :gutter="16">
        <Col span="24">
          <Input type="textarea" v-model="orderInfo.orderMall.operateRemark" placeholder="运营备注"></Input>
        </Col>
      </Row>
      <!-- 重写对话框底部按钮 -->
      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button @click="confirm" type="primary">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: 'order-ope',
    data() {
      return {
        isShowModal: false,
        loadingBtn: false,
        orderInfo: {
          orderMall: {},
          sendLogistics: {},
          backLogistics: {},
          voucher: {}
        },
        goodsSkuInfo: {},
        title: '订单详情'
      };
    },
    methods: {
      // 显示模态框
      show(row) {
        this.isShowModal = true;
        this.getOrderMallById(row);
      },
      // 查询订单详情
      getOrderMallById(row) {
        this.$Spin.show();
        this.axios
          .get('/factory/order/getOrderMallById', {
            params: { id: row.mallOrderId }
          })
          .then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            res.data.sendLogistics = res.data.sendLogistics || {};
            res.data.backLogistics = res.data.backLogistics || {};
            this.orderInfo = res.data;
          });
      },
      // 关闭模态框
      hide() {
        this.isShowModal = false;
      },
      confirm() {
        this.axios
          .post('/orderMall/operateRemark', {
            orderCode: this.orderInfo.orderMall.mallOrderCode,
            operateRemark: this.orderInfo.orderMall.operateRemark
          }).then(res => {
            console.log(res)
            this.hide()
          })
      }
    }
  };
</script>

<style scoped lang="less">
  /deep/.ivu-row {
    margin-bottom: 5px;
  }
  .j-order-image {
    display: flex;

    .j-order-image-main {
      width: 130px;
      height: 130px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .j-order-image-info {
      margin-left: 10px;

      .j-order-goods-sku {
        margin-top: 5px;
      }

      .j-order-goods-price {
        margin-top: 5px;
      }

      .j-order-goods-num {
        margin-top: 5px;
      }
    }
  }
</style>
